<template>
  <div style="width:80vw;margin: auto;top:0;bottom:0;left:0;right:0">
    <table style="table-layout: fixed; word-break: break-all; word-wrap: break-word;" width="100%" >
    <tr>
      <th colspan="4" height="80">
        {{info.boxName}}
      </th>
    </tr>
    <tr>
        <td>产品编号</td>
        <td>{{ info.productNumber }}</td>
        <td>运达地点</td>
        <td>{{ info.location }}</td>
    </tr>
    <tr>
        <td>日期</td>
        <td>{{ info.locationTime }}</td>
    </tr>
  </table>
    <div style="margin-top:10px">
      <table>
    <tr>
        <th>序号</th>
        <th>名称</th>
        <th>外形尺寸</th>
        <th>数量</th>
        <th>单件重量(KG)</th>
        <th>总量(KG)</th>
        <th>备注</th>
    </tr>
    <div v-if="dataListLength!=0">
      <tr v-for="(item,index) in list" :key=item+index > 
        <td>{{index+1}}</td>
        <td>{{item[index].partName}}</td>
        <td>{{item[index].overallDimension}}</td>
        <td>{{item[index].packingQuantity}}</td>
        <td>{{item[index].weight}}</td>
        <td>{{item[index].weightTotal}}</td>
        <td style="border-right:1px solid black">{{item[index].remark}}</td>
    </tr>
    </div>
    </table>
    </div>
  </div>

</template>
<script setup lang="ts">
defineProps({
  info: {
    type: Array,
    default: () => []
  },
  list: {
    type: Array,
    default: () => []
  },
  dataListLength: {
    type: Number,
  }
})
</script>
